<template>
    <div class="app-container">
        <!--      搜索栏  -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="项目代码" prop="projectCode">
                <el-input v-model="queryParams.projectCode" placeholder="请输入项目代码" clearable size="small"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="题库名称" prop="questionBankName">
                <el-input v-model="queryParams.questionBankName" placeholder="请输入题库名称" clearable size="small"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="试卷名称" prop="paperName">
                <el-input v-model="queryParams.paperName" placeholder="请输入试卷名称" clearable size="small"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="试卷类型" prop="paperType">
                <el-select v-model="queryParams.paperType" placeholder="试卷类型" clearable size="small">
                    <el-option v-for="dict in paperTypeList"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="试卷状态" prop="paperStatus">
                <el-select v-model="queryParams.paperStatus" placeholder="试卷状态" clearable size="small">
                    <el-option v-for="dict in paperStatusList"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建日期">
                <el-date-picker v-model="dateRange"
                        size="small"
                        style="width: 240px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="margin-left: 10px;">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini"
                        @click="handleAddArmy"
                >新增</el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single"
                        @click="handleEdit"
                >编辑</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
                        @click="handleDelete"
                >删除</el-button>
            </el-col>
            <!--<el-col :span="1.5">
                <el-button type="info" icon="el-icon-upload2" size="mini"
                        @click="handleImport"
                >导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="mini"
                        @click="handleExport"
                >导出</el-button>
            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

<!--  max-height="400" -->
        <el-table v-loading="loading" :data="paperList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="序号" align="center" type="index" :show-overflow-tooltip="false"/>
            <el-table-column label="项目代码" align="center" prop="projectCode"/>
            <el-table-column label="题库名称" align="center" prop="questionBankName"/>
            <el-table-column label="试卷名称" align="center" prop="paperName"/>
            <el-table-column label="创建日期" align="center" prop="creationDate">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.creationDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类型" align="center" prop="paperType" :formatter="paperTypeFormat"/>
            <el-table-column label="状态" align="center" prop="paperStatus" :formatter="paperStatusFormat"/>
            <el-table-column label="操作" align="center" class-name="small-padding" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view"
                               @click="handlePreview(scope.row)"
                    >预览</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleEdit(scope.row)"
                    >编辑</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="pageParams.page"
                :limit.sync="pageParams.rows"
                @pagination="getList"
        />

        <!-- 添加或修改试卷信息 -->
        <el-dialog :title="title" :visible.sync="open" :fullscreen="false" top="15px" v-if="open" width="65%" append-to-body>
            <paper-form :paperForm="paperForm" :paperStatusList="paperStatusList" @submitForm="getList" @cancelDialog="cancel"></paper-form>
        </el-dialog>
<!--   试卷预览     -->
        <el-dialog :title="title" :visible.sync="previewOpen" :fullscreen="false" top="15px" v-if="previewOpen" width="50%" append-to-body>
            <paper-preview-form :paperForm="paperForm" @cancelDialog="cancel" />
        </el-dialog>

    </div>
</template>

<script>
    import {
        getExamPaperList,
        getExamPaperByPaperId,
        addExamPaper,
        updateExamPaper,
        deleteExamPaper,
    } from "@/api/question/paper";
    import paperPreviewForm from "@/views/question/paper/form/paperPreviewForm";
    import paperForm from "@/views/question/paper/form/paperForm";
    export default {
        name: "examPaper",
        components: {
            paperPreviewForm,
            paperForm,
        },
        data() {
            return {
                // 按钮loading
                buttonLoading: false,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                paperNames: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 试卷表格数据
                paperList: [],
                // 弹出层标题
                title: "",
                // 是否弹出层
                open: false,
                // 预览弹出层
                previewOpen: false,
                // 试卷类型数据字典
                paperTypeList: [],
                // 试卷状态数据字典
                paperStatusList: [],
                // 日期范围
                dateRange: [],
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                // 查询参数
                queryParams: {
                    projectCode: undefined,
                    questionBankName: undefined,
                    paperName: undefined,
                    outReel: undefined,
                    paperType: undefined,
                    paperStatus: undefined,
                },
                // 试卷表单参数
                paperForm: {},
            };
        },
        created() {
            this.getList();
            //查询试卷类型字典状态
            this.getDicts("paper_type").then(response => {
                this.paperTypeList = response.responseBody.result;
            });
            // 查询试卷是否启用状态
            this.getDicts("paper_status").then(response => {
                this.paperStatusList = response.responseBody.result;
            });
        },
        methods: {
            /** 查询题库列表 */
            getList() {
                this.loading = true;
                getExamPaperList(
                    {
                        'pageParameter': this.pageParams,
                        'searchParams': this.addDateRange(this.queryParams, this.dateRange)
                    }
                ).then(response => {
                    this.paperList = response.responseBody.result;
                    this.total = response.responseBody.pageParameter.totalCount;
                    this.loading = false;
                });
            },

            // 试卷类型字典翻译
            paperTypeFormat(row, column) {
                return this.selectDictLabel(this.paperTypeList, row.paperType);
            },
            // 试卷状态字典翻译
            paperStatusFormat(row, column) {
                return this.selectDictLabel(this.paperStatusList, row.paperStatus);
            },

            // 取消按钮
            cancel() {
                this.reset();
                this.open = false;
                this.previewOpen = false;
            },

            // 表单重置
            reset() {
                // 试卷表单
                this.paperForm = {};
                this.dateRange = [];
                this.resetForm("form");
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.pageParams.page = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.reset();
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.paperId)
                this.paperNames = selection.map(item => item.paperName)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },

            /** 新增试卷按钮操作 */
            handleAddArmy() {
                this.reset();
                this.paperForm = {
                    paperId: undefined,
                    paperStatus: '0',
                    questionCopyDTOList: [],
                }
                this.open = true;
                this.title = "添加试卷";
            },

            /** 试卷预览按钮操作 */
            handlePreview(row) {
                this.reset();
                this.loading = true;
                const ids = row.paperId || this.ids
                getExamPaperByPaperId(ids).then(response => {
                    this.paperForm = response.responseBody;
                    // 增强体验效果
                    this.loading = false;
                    this.title = "试卷预览";
                    this.previewOpen = true;
                });

            },

            /** 试卷编辑按钮操作 */
            handleEdit(row) {
                this.reset();
                this.loading = true;
                const ids = row.paperId || this.ids
                getExamPaperByPaperId(ids).then(response => {
                    this.paperForm = response.responseBody;
                    this.open = true;
                    // 增强体验效果
                    this.loading = false;
                    this.title = "编辑试卷";
                });
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.paperId || this.ids;
                const paperNames = row.paperName || this.paperNames;
                this.$confirm('确认删除试卷"' + paperNames + '"的数据项？','提示',{
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.loading = true;
                    deleteExamPaper(ids).then(response => {
                        if (response.retCode === "200") {
                            this.getList();
                            this.msgSuccess("删除成功");
                        }
                    })
                }).catch(response => {
                }).finally(() => {
                    this.loading = false;
                });
            },
        }
    };
</script>
